<template>
	<view class="container">
		<view class="panel-header padding-top solid-bottom">
			<view class="g-goBack" @click="$utils.toBack()">
				<view class="cuIcon-back"></view>
			</view>
			<view class="text-cut">分成配置({{placeName}})</view>
		</view>
		<scroll-view scroll-x="true" class="bg-white nav" v-if="businessTypeList && businessTypeList.length > 1">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index == typeSelectIndex?'text-orange cur':''"
					v-for="(item,index) in businessTypeList" :key="index" @click="bindTypeChange(index)">
				{{item.businessTypeName}}
				</view>
			</view>
		</scroll-view>
		<view class="list-body">
			<scroll-view scroll-y="true">
				<view class="cu-card device" v-for="(item,index) in deviceDataList" :key="index">
					<view class="cu-item padding">
					   <view class="text-orange text-lg padding-bottom-xs">{{item.deviceSn}}</view>
					   <view>设备类型：{{item.deviceTypeName}}</view>
					   <view>功能模块：{{item.deviceFunNames.join(',')}}</view>
					   <view>绑定信息：{{item.bindNote || '---'}}</view>
					   <view>部署时间：{{item.deployDate}}</view>
					   <view class="state-info">{{item.stateName}}</view>
					   <view class="flex justify-end margin-top-sm" v-if="canUndeploy">
						   <button class="cu-btn line-red sm" @click="btnUndeploy(item)">移除部署</button>
					   </view>
				   </view>
				</view>
				<view class="foot" v-if="deviceDataList && deviceDataList.length > 0"><text class="ftxt">我也是有底线的</text></view>
				<view class="foot" v-else><text class="ftxt">暂无数据</text></view>
		    </scroll-view>
		</view>
		<view class="cu-bar btn-group list-footer" v-if="canDeploy">
		    <button class="cu-btn bg-orange shadow-blur round" @click="btnDeploy()">部署设备</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				placeId:null,
				placeName:'网点名称',
				canDeploy:false,
				canUndeploy:false,
				businessTypeList:[{businessType:'0',businessTypeName:'全部'}],
				typeSelectIndex:0,
				
				deviceDataList:[]
			}
		},
		onLoad(option) {
			const _self = this;
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('fromData', function(data) {
			    console.log(data)
				_self.placeId = data.placeId;
				_self.placeName = data.placeName;
				_self.canDeploy = data.canDeploy;
				_self.canUndeploy = data.canUndeploy;
				_self._loadBusinessType();
				_self._loadDataList();
			})
		},
		methods: {
			_loadDataList:function(){
				if(this.placeId){
					uni.showLoading({
						title:'处理中...'
					})
					let type = this.businessTypeList[this.typeSelectIndex];
					
					const _self = this;
					const api = this.$request;
					api.post(api.url.placeDeviceList,{
						placeId:this.placeId,
						businessType:type.businessType
					},res=>{
						uni.hideLoading();
						console.log(res);
						if(res.code == 200 || res.code == 202){
							_self.deviceDataList = res.body.items||[];
						}else if(res.msg){
							uni.showModal({
								content:res.msg,
								showCancel:false
							});
						}else {
							uni.showToast({
								title:'获取数据失败',
								icon:'error'
							});
						}
					})
				}else{
					uni.showToast({
						title:'参数错误',
						icon:'error'
					});
					setTimeout(function(){
						uni.navigateBack();
					},1000);
				}
			},
			_loadBusinessType:function(){
				const api = this.$request;
				api.post(api.url.placeBusiTypeList,{
					placeId:this.placeId
				},res=>{
					console.log(res);
					if(res.code==200){
						let businessTypeList = [{businessType:'0',businessTypeName:'全部'}]
						for(let i in res.body.items){
							businessTypeList.push(res.body.items[i]);
						}
						this.businessTypeList = businessTypeList;
					}else if(res.code==202){
						//不做任何事
					}else if(res.msg){
						uni.showModal({
							content:res.msg,
							showCancel:false
						})
					}else {
						uni.showToast({
							title:'获取数据失败',
							icon:'error'
						});
					}
				})
			},
			bindTypeChange:function(index){
				this.typeSelectIndex = index;
				this._loadDataList();
			},
			btnDeploy:function(){
				const _self = this;
				uni.navigateTo({
					url:'./deploy',
					success: function(res) {
					    // 通过eventChannel向被打开页面传送数据
					    res.eventChannel.emit('fromData', { placeId:_self.placeId,placeName:_self.placeName })
					}
				})
			},
			btnUndeploy:function(item){
				const _self = this;
				const api = this.$request;
				uni.showModal({
					title:'温馨提示',
					content:'确定要移除【'+item.deviceSn+'】设备吗？',
					complete:function(res){
						if(res.confirm){
							api.post(api.url.placeDeviceUndeploy,{
								deviceSn:item.deviceSn
							},res=>{
								console.log(res);
								if(res.code == 200){
									uni.showToast({
										title:'移除成功',
										icon:'success'
									});
									_self._loadDeviceTypeDataList();
									_self._loadDeviceDataList();
								}else if(res.msg){
									uni.showModal({
										content:res.msg,
										showCancel:false
									});
								}else {
									uni.showToast({
										title:'操作失败',
										icon:'error'
									});
								}
							})
						}
					},
				})
			},
		}
	}
</script>

<style lang="less">
.container .list-body scroll-view{height:90vh;}
.container .cu-card.device>.cu-item{position:relative;margin-bottom:0;}
.container .cu-card.device .state-info{position:absolute;top:15rpx;right:25rpx;}
.container .list-footer{position: fixed;bottom: 0;left:0;right:0;}
</style>
